<template>
  <div class="changepwd">
    <!-- 头部 -->
    <header class="changepwd_header">
      <div class="changepwd_header_left">
        <img src="../assets/logo.png" />
      </div>
      <div class="changepwd_header_right">星辰日报（Daily Star）</div>
    </header>
    <!-- 主题内容 -->
    <main class="changepwd_main">
      <div class="changepwd_main_content">
        <div class="changepwd_main_content_ipt">
          <input
            v-model="form.user_phone"
            type="text"
            placeholder="需要修改密码的手机号"
          />
        </div>
        <div class="changepwd_main_content_ipt">
          <input
            v-model="form.user_pwd1"
            type="password"
            placeholder="请输入新密码"
          />
        </div>
        <div class="changepwd_main_content_ipt">
          <input
            v-model="form.user_pwd2"
            type="password"
            placeholder="再次输入确认新密码"
          />
        </div>

        <div class="changepwd_main_content_btn">
          <button @click="changepwdFn">确认更改密码</button>
        </div>
      </div>
      <div class="changepwd_main_footer">
        <div class="changepwd_main_footer_box">
          <p @click="gotoLoginFn">返回登录页~</p>
        </div>
      </div>
    </main>
  </div>
</template>

<style lang="less" scoped>
@import "../css/variable.less";
.changepwd {
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/registerbg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  // 自动调整大小
  background-attachment: fixed;
  color: white;
  padding: 10px;

  .changepwd_header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .changepwd_header_left {
      img {
        width: 60px;
      }
    }

    .changepwd_header_right {
      flex: 1;
      font-family: "mylogofont";
      font-weight: 700;
      font-size: 20px;
    }
  }

  .changepwd_main {
    font-size: 24px;
    margin: 250px 0 0 0;

    .changepwd_main_content {
      width: 100%;

      .changepwd_main_content_ipt {
        width: 270px;
        margin: 15px auto;

        input {
          width: 270px;
          height: 45px;
          padding: 0 0 0 15px;
          font-family: "隶书";
          border: 1px solid aqua;
          color: black;
        }
      }

      .changepwd_main_content_btn {
        width: 270px;
        margin: 15px auto;

        button {
          color: black;
          font-weight: 700;
          font-family: "宋体";
          width: 270px;
          height: 50px;
          background: aqua;
        }
      }
    }
  }

  .changepwd_main_footer {
    display: flex;
    justify-content: center;
    align-items: center;

    .changepwd_main_footer_box {
      font-size: 16px;
      font-weight: 700;
      border-bottom: 1px dashed aqua;
    }
  }
}
</style>

<script>
import RouterMixins from "@/components/mixins/RouterMixins";
export default {
  name: "ChangepwdView",
  mixins: [RouterMixins],
  data() {
    return {
      form: {
        user_phone: "",
        user_pwd1: "",
        user_pwd2: "",
      },
      // 正则表达式用于验证电话号码格式
      phoneRegex: /^\d{11}$/,
      // 密码长度9字符限制
      passwordRegex: /^.{9,}/,
    };
  },
  methods: {
    changepwdFn() {
      // console.log("111111");
      const invalidInputs = [];

      if (!this.validatePhoneFn()) {
        invalidInputs.push("请输入有效的手机号");
      }
      if (!this.validatePasswordFn()) {
        invalidInputs.push("请输入9个字符的密码");
      }
      if (!this.validatePasswordMatchFn()) {
        invalidInputs.push("两次输入的密码不一致");
      }

      if (invalidInputs.length > 0) {
        alert(invalidInputs.join(", \n"));
        return;
      }

      // console.log(this.form);
      let { user_phone, user_pwd1 } = this.form;
      let arrstr1 = localStorage.getItem("MYLOCALUSER");
      let arrstr2 = JSON.parse(arrstr1);
      console.log("1111", arrstr2);
      console.log("22222", user_phone, user_pwd1);
      let newArr = arrstr2.filter((item) => {
        return item.user_phone == user_phone;
      });
      // console.log("咳咳咳",newArr);
      if (newArr.length !== 0) {
        // console.log("咳咳咳", newArr);
        let newMylocaluser = Object.assign({},newArr[0],{user_pwd1: user_pwd1})
        let updateArr = arrstr2.map((item)=>{
          return item.user_phone === user_phone ? newMylocaluser : item;
        })
        let newupdateArr = JSON.stringify(updateArr);
        localStorage.setItem("MYLOCALUSER",newupdateArr);
        alert("修改密码成功~");
        setTimeout(()=>{
          this.$router.push({path: "/longin"}).catch(()=>{});
        },1000);
      } else {
        alert("该账号暂未注册喔~");
      }
    },
    // 验证电话号码格式
    validatePhoneFn() {
      return this.phoneRegex.test(this.form.user_phone);
    },
    // 验证密码长度
    validatePasswordFn() {
      return this.passwordRegex.test(
        this.form.user_pwd1 || this.form.user_pwd2
      );
    },
    // 验证两次密码是否一致
    validatePasswordMatchFn() {
      return this.form.user_pwd1 === this.form.user_pwd2;
    },
  },
};
</script>

